<template>
  <div class="data-mapping-container" v-loading="loading">
    <div class="panel-header1">
      <h3 class="panel-title">
      一对一映射
        <span v-if="codeId" class="code-id">ID: {{ codeId }}</span>
      </h3>
      
      <div class="panel-actions">
        <el-button type="success" size="small" icon="el-icon-view" @click="handlePreview">预览数据</el-button>

        <el-button 
        type="primary" 
          size="small" 
        icon="el-icon-document-checked" 
        @click="hadnleSaveCondtion" 
        :loading="saving"
        >保存规则</el-button>
      </div>
    </div>    
     <div class="mapping-content">
    <!-- 左侧入库字段选择区 -->
    <div class="field-selection-panel">
        <div class="panel-header">
          <h3>入库字段</h3>
          <el-tooltip content="全选/取消所有入库字段" placement="top">
            <el-checkbox 
              v-model="checkedIn" 
              @change="handleChangeCheckAll" 
              v-if="wareList.length > 0"
            >全选</el-checkbox>
          </el-tooltip>
        </div>
        
        <div class="panel-body" v-if="codeId">
          <div class="field-list">
            <el-checkbox-group v-model="checkList" @change="handleGetCheckedWare">
              <div v-for="(item,index) in wareList" :key="index" class="field-item">
                <el-checkbox 
                  :label="item.columnName" 
                  :disabled="item.columnName == 'INSTR_ID' || item.columnName == 'CODE_ID' || item.columnName == 'TULI'|| item.columnName == 'REMARK'"
                >
                  <span class="field-name">{{ item.columnName }}</span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div v-else class="empty-state">
          <i class="el-icon-s-prompt empty-icon"></i>
          <p>请在左侧选择测点</p>
        </div>
      </div>

    <!-- 右侧配置内容区 -->
    <div class="configuration-panel">
      <!-- 数据源配置区域 -->
      <div class="data-source-section">
        <el-collapse v-model="activeNames" class="data-source-collapse">
          <el-collapse-item title="数据源配置" name="1">
            <div v-for="(item, index) in conditionList" :key="index" class="source-item">
              <div class="source-card">
                <!-- 数据源基本配置 -->
                <div class="source-config">
                  <div class="config-row">
                    <div class="config-group">
                      <label class="config-label">数据源{{ index + 1 }}</label>
                      <el-select 
                        v-model="item.dbName" 
                        placeholder="选择数据源" 
                        @change="handleChangeDbID($event, index, 1)" 
                        class="config-select db-select"
                        value-key="id"
                      >
                        <el-option 
                          v-for="(option, optIndex) in wareSelectList" 
                          :key="optIndex" 
                          :label="option.alias" 
                          :value="option"
                        ></el-option>
                      </el-select>
                    </div>
                    
                    <div class="config-group">
                      <label class="config-label">模式</label>
                      <el-select 
                        v-model="item.dbSchemaName" 
                        placeholder="选择模式" 
                        @change="handleChangeDbSchemaId($event, index, 1)" 
                        @focus="handleFocusDbSchemaId(item.dbId, 1)" 
                        class="config-select schema-select"
                        value-key="schemaId"
                      >
                        <el-option 
                          v-for="(schema, schemaIndex) in dbSchemas" 
                          :key="schemaIndex" 
                          :label="schema.schemaName" 
                          :value="schema"
                        ></el-option>
                      </el-select>
                    </div>
                    
                    <div class="config-group">
                      <label class="config-label">数据表</label>
                      <el-select 
                        v-model="item.dictTableName" 
                        placeholder="选择数据表" 
                        @change="handleChangeDictTableID($event, index, 1)" 
                        @focus="handleFocusDictTableID(item.dictVersionId)" 
                        class="config-select table-select"
                        value-key="id"
                      >
                        <el-option 
                          v-for="(table, tableIndex) in dictSelect" 
                          :key="tableIndex" 
                          :label="table.tableName" 
                          :value="table"
                        ></el-option>
                      </el-select>
                    </div>
                    
                    <div class="config-group">
                      <label class="config-label">时间列</label>
                      <el-select 
                        v-model="item.dictTimeColumnName" 
                        placeholder="选择时间列" 
                        @change="handleChangedictTimeColumnId($event, index, 1)" 
                        @focus="handleFocusdictTimeColumnId(item.dictTableId)" 
                        class="config-select time-column-select"
                        value-key="id"
                      >
                        <el-option 
                          v-for="(column, columnIndex) in versionColumnSelect" 
                          :key="columnIndex" 
                          :label="column.columnName" 
                          :value="column"
                        ></el-option>
                      </el-select>
                    </div>
                    
                    <div class="config-group master-group">
                      <label class="config-label">主表</label>
                      <el-checkbox 
                        v-model="item.isMaster" 
                        @change="handleChangeMainSelect($event, index)"
                        class="master-checkbox"
                      ></el-checkbox>
                    </div>
                    
                    <el-button 
                      type="danger" 
                      icon="el-icon-delete" 
                      @click="hadnleDelCondtion(index)" 
                      size="small"
                      class="delete-btn"
                      v-if="conditionList.length > 1"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
                
                <!-- 时间范围和条件配置 -->
                <div class="condition-config">
                  <div v-if="!item.isMaster" class="time-range">
                    <span class="range-label">时间范围区间（秒）</span>
                    <el-input 
                      v-model="item.matchSeconds" 
                      placeholder="时间范围区间（秒）" 
                      class="seconds-input"
                      size="small"
                    ></el-input>
                  </div>
                  
                  <div class="condition-actions">
                    <el-button 
                      type="primary" 
                      icon="el-icon-plus" 
                      @click="hadnleAddCondtionItem(index)" 
                      size="small"
                      class="add-condition-btn"
                    >
                      添加条件
                    </el-button>
                  </div>
                  
                  <!-- 条件列表 -->
                  <div v-for="(subItem, subIndex) in item.conditions" :key="subIndex" class="condition-row">
                    <div class="condition-fields">
                      <el-select 
                        v-model="subItem.dictColumnName" 
                        placeholder="选择列" 
                        size="small" 
                        @change="handleChangeColumnName($event, index, subIndex)" 
                        @focus="handleFouceSubItemTimeSelect(item.dictTableId)" 
                        value-key="id"
                        class="condition-select"
                      >
                        <el-option 
                          v-for="(column, colIndex) in versionColumnSelect" 
                          :key="colIndex" 
                          :label="column.columnName" 
                          :value="column"
                        ></el-option>
                      </el-select>
                      
                      <el-select 
                        v-model="subItem.operator" 
                        placeholder="操作符" 
                        size="small" 
                        class="operator-select"
                      >
                        <el-option 
                          v-for="(operator, opIndex) in dbOperator" 
                          :key="opIndex" 
                          :label="operator" 
                          :value="operator"
                        ></el-option>
                      </el-select>
                      
                      <el-input 
                        v-model="subItem.conditionVal" 
                        placeholder="条件值" 
                        size="small"
                        class="value-input"
                      ></el-input>
                    </div>
                    
                    <el-button 
                      type="danger" 
                      icon="el-icon-delete" 
                      @click="handleDelConditionItem(index, subIndex)" 
                      size="mini"
                      class="delete-condition-btn"
                      circle
                    ></el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 字段映射表格 -->
      <div class="mapping-table-section">
        <div class="table-header">
          <span class="table-title">字段映射配置</span>
        </div>
        <el-table 
          :data="tableList" 
          border 
          class="mapping-table"
          height="100%"
        >
          <el-table-column prop="targetColumn" label="入库字段" align="center" width="120"></el-table-column>
          
          <el-table-column prop="uniqueIndex" label="数据源" align="center" width="150">
            <template slot-scope="scope">
              <el-select 
                v-model="scope.row.uniqueIndex" 
                placeholder="选择数据源" 
                size="small" 
                clearable 
                @clear="handleClearSJY($event, scope.$index)" 
                :disabled="scope.row.targetColumn == 'INSTR_ID' || scope.row.targetColumn == 'CODE_ID' || scope.row.targetColumn == 'TULI' || scope.row.targetColumn == 'REMARK'"
                class="source-select"
              >
                <el-option 
                  v-for="(item, optIndex) in conditionList" 
                  :key="optIndex" 
                  :label="`数据源${optIndex + 1}`" 
                  :value="`${optIndex + 1}`"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          
          <el-table-column prop="sourceDictColumnName" label="字段" align="center" width="180">
            <template slot-scope="scope">
              <el-select 
                v-model="scope.row.sourceDictColumnName" 
                placeholder="选择字段" 
                size="small" 
                @change="handleChangedictTimeTable($event, scope.$index)" 
                @focus="handleFocusdictTimeTable(scope.$index)" 
                value-key="id" 
                v-if="scope.row.uniqueIndex" 
                :disabled="scope.row.targetColumn == 'INSTR_ID' || scope.row.targetColumn == 'CODE_ID' || scope.row.targetColumn == 'TULI' || scope.row.targetColumn == 'REMARK'"
                class="column-select"
              >
                <el-option 
                  v-for="(column, colIndex) in versionColumnSelectTable" 
                  :key="colIndex" 
                  :label="column.columnName" 
                  :value="column"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          
          <el-table-column prop="defaultType" label="策略" align="center" width="120">
            <template slot-scope="scope">
              <el-select 
                v-model="scope.row.defaultType" 
                placeholder="选择策略" 
                size="small" 
                v-if="!scope.row.uniqueIndex"
                class="strategy-select"
              >
                <el-option 
                  v-for="strategy in dbDefaultType" 
                  :key="strategy" 
                  :label="strategy" 
                  :value="strategy"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          
          <el-table-column prop="defaultVal" label="默认值" align="center">
            <template slot-scope="scope">
              <el-input 
                v-model="scope.row.defaultVal" 
                placeholder="输入默认值" 
                size="small" 
                :disabled="scope.row.targetColumn == 'INSTR_ID' || scope.row.targetColumn == 'CODE_ID' || scope.row.targetColumn == 'TULI' || scope.row.targetColumn == 'REMARK'"
                class="default-value-input"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    </div> 

    <!-- 预览对话框 -->
    <el-dialog 
      title="数据预览" 
      :visible.sync="previewDialogVisible" 
      width="1000px" 
      v-dialogDrag
      class="preview-dialog"
    >
      <el-table :data="dialogTableList" style="width: 100%" class="preview-table">
        <el-table-column
          v-for="column in dialogTableTitle"
          :key="column"
          :prop="column"
          :label="column"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {DBlist,tableColumnList,versionTable,versionColumn,dbConfig,pointSave,pointDetail,pointPreview,PowerPointQueryById,changeIndex} from "@/api/https";
export default {
  props:{
        stationId:{
            type:Number,
            default:0
        },
        codeId:{
            type:Number,
            default:0
        },
        copyCodeID:{
            type:Number,
            default:0
        },
        tabName:{
            type:String,
            default:''
        }
    },
    data() {
      return {
        conditionList:[],
        wareSelectList:[],
        dbSchemas:[],
        activeNames: '1',
        tableList:[],
        wareList:[],
        checkList:[],
        dictSelect:[],
        versionColumnSelect:[],
        dbOperator:[],
        dbDefaultType:[],
        loading:false,
        matchSeconds:0,
        id:null,
        previewDialogVisible:false,
        dialogTableTitle:[],
        dialogTableList:[],
        checkedIn:false,
        versionColumnSelectTable:[],
        lastTimeCursor:''
      }
    },
    created(){
        dbConfig().then(res=>{
            if(res.code == 200){
              this.dbOperator = res.data.dbOperator
              this.dbDefaultType = res.data.dbDefaultType
            }
          })
    },
    watch:{
        'stationId':{
            handler(newVal,oldVal){
                this.wareList = []
                this.wareSelectList = []
                this.dictSelect = []
                this.versionColumnSelect = []
                this.conditionList = []
                this.checkList = []
                this.tableList = []
            }
        },
        'codeId':{
            handler(newVal,oldVal){
                if(this.codeId && this.tabName == '2'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(false)
                    },500)
                }else{
                    this.clearData()
                    this.loading = false
                }
            }
        },
        'copyCodeID':{
            handler(newVal,oldVal){
                if(this.copyCodeID != 0 && this.copyCodeID != null && this.tabName == '2'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(true)
                    },500)
                }else if(this.copyCodeID == null && this.tabName == '2'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    this.loading = false
                }
            }
        },
        'tabName':{
            handler(newVal,oldVal){
                if(this.codeId && this.tabName == '2'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(false)
                    },500)
                }else{
                    this.clearData()
                    this.loading = false
                }
            }
        }
    },
    methods:{
      hadnleAddCondtionMore(){
            this.conditionList.push({
                conditions:[],
                dbId:'',
                dbName:'',
                dbSchemaId:'',
                dbSchemaName:'',
                dictTableId:'',
                dictTableName:'',
                dictTimeColumnId:'',
                dictTimeColumnName:'',
                isMaster:false,
                matchSeconds:0
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.data-mapping-container {
  padding: 10px;
  height: calc(100vh - 240px);
}

.mapping-sidebar {
  min-width: 280px;
  height: calc(100vh - 260px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
  
  .header-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
  }
  
  .select-all-checkbox {
    ::v-deep .el-checkbox__label {
      font-weight: 600;
      color: #2c3e50;
      font-size: 16px;
    }
  }
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  
  .field-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .field-item {
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    
    &:hover {
      background-color: #f0f7ff;
      border-color: #409eff;
    }
    
    ::v-deep .el-checkbox__label {
      color: #606266;
      font-family: 'Monaco', 'Consolas', monospace;
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #909399;
    
    i {
      font-size: 32px;
      margin-bottom: 12px;
      color: #c0c4cc;
    }
    
    p {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
}


.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
  
  .action-buttons {
    display: flex;
    gap: 12px;
    
    .action-btn {
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.2s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
  }
  
  .cursor-config {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .cursor-label {
      font-size: 14px;
      color: #606266;
      font-weight: 500;
    }
    
    .cursor-input {
      width: 220px;
      border-radius: 6px;
      
      ::v-deep .el-input__inner {
        border-radius: 6px;
      }
    }
    
    .cursor-btn {
      border-radius: 6px;
      padding: 9px 16px;
    }
  }
}

.data-source-section {
  .data-source-collapse {
    border: none;
    
    ::v-deep .el-collapse-item__header {
      height: 52px;
      line-height: 52px;
      background: #fff;
      border: none;
      padding: 0 20px;
      font-weight: 600;
      color: #2c3e50;
      border-radius: 4px;
      width: 100%;
    }
    
    ::v-deep .el-collapse-item__wrap {
      border: none;
      background: transparent;
    }
    
    ::v-deep .el-collapse-item__content {
      padding: 20px 0 0 0;
    }
  }
  
  .source-item {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .source-card {
    background: #f8fafc;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
  }
  
  .source-config {
    margin-bottom: 20px;
    
    .config-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
    }
    
    .config-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      
      .config-label {
        font-size: 12px;
        color: #606266;
        font-weight: 500;
      }
      
      .config-select {
        width: 160px;
        
        ::v-deep .el-input__inner {
          border-radius: 6px;
        }
      }
      
      &.master-group {
        flex-direction: row;
        align-items: center;
        gap: 8px;
      }
    }
    
    .delete-btn {
      margin-left: auto;
      border-radius: 6px;
    }
  }
  
  .condition-config {
    .time-range {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      
      .range-label {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }
      
      .seconds-input {
        width: 200px;
        
        ::v-deep .el-input__inner {
          border-radius: 6px;
        }
      }
    }
    
    .condition-actions {
      margin-bottom: 16px;
      
      .add-condition-btn {
        border-radius: 6px;
      }
    }
    
    .condition-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      padding: 12px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e8e8e8;
      
      .condition-fields {
        display: flex;
        gap: 12px;
        flex: 1;
        
        .condition-select,
        .operator-select {
          flex: 1;
          
          ::v-deep .el-input__inner {
            border-radius: 6px;
          }
        }
        
        .value-input {
          flex: 2;
          
          ::v-deep .el-input__inner {
            border-radius: 6px;
          }
        }
      }
      
      .delete-condition-btn {
        flex-shrink: 0;
      }
    }
  }
}

.mapping-table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .table-header {
    padding: 0 0 16px 0;
    
    .table-title {
      font-weight: 600;
      color: #2c3e50;
      font-size: 16px;
    }
  }
  
  .mapping-table {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    
    ::v-deep .el-table__header {
      th {
        background: linear-gradient(90deg, #f8f9fa 0%, #f1f3f5 100%);
        color: #2c3e50;
        font-weight: 600;
        height: 48px;
      }
    }
    
    ::v-deep .el-table__body {
      tr:hover > td {
        background-color: #f0f7ff !important;
      }
    }
    
    ::v-deep .el-select,
    ::v-deep .el-input {
      width: 100%;
      
      .el-input__inner {
        border-radius: 6px;
      }
    }
  }
}

.preview-dialog {
  ::v-deep .el-dialog {
    border-radius: 12px;
    overflow: hidden;
  }
  
  ::v-deep .el-dialog__header {
    background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e8e8e8;
  }
  
  .preview-table {
    border-radius: 8px;
    overflow: hidden;
    
    ::v-deep .el-table__header {
      th {
        background: linear-gradient(90deg, #f8f9fa 0%, #f1f3f5 100%);
        color: #2c3e50;
        font-weight: 600;
      }
    }
  }
}





.panel-header1 {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#fff;
    margin: -11px 0 10px -10px;
    
    .panel-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 12px;
      
      .code-id {
        font-size: 12px;
        color: #64748b;
        font-weight: normal;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
      }
    }
    
    .panel-actions {
      display: flex;
      gap: 8px;
    }
  }

.panel-content {
  flex: 1;
  overflow: auto;
  background: #fafafa;
}
.mapping-content {
    display: flex;
    gap: 10px;
  .field-selection-panel {
      min-width: 280px;
      height: calc(100vh - 260px);
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      
      .panel-header {
        padding: 16px;
        border-bottom: 1px solid #e6ebf5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 14px;
          color: #303133;
        }
      }
      
      .panel-body {
        height:calc(100vh - 280px);
        overflow-y: auto;
        
        .search-input {
          padding: 12px;
        }
        
        .field-list {
          flex: 1;
          overflow-y: auto;
          padding: 0 12px 12px;
          
          .field-item {
            padding: 8px 0;
            border-bottom: 1px dashed #e6ebf5;
            
            &:last-child {
              border-bottom: none;
            }
            
            .field-name {
              font-size: 13px;
            }
            
            .field-info {
              margin-left: 4px;
              color: #909399;
            }
          }
        }
      }
      
      .empty-state {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #909399;
        
        .empty-icon {
          font-size: 48px;
          margin-bottom: 12px;
        }
        
        p {
          margin: 0;
          font-size: 14px;
        }
      }
    }
}
</style>